<script setup lang="ts">
import {useRouter} from "vue-router"
import {onMounted, onUnmounted } from 'vue'
import { useStrategyStore } from "@renderer/store/strategy"
import { storeToRefs } from "pinia";

const router = useRouter()

const keyUpActions = (e: KeyboardEvent)=>{
    e.preventDefault()
    switch (e.key){
        case "F8":
            onSubmit()
            break
        case "Escape":
            router.back()
            break
        default:
            break
    }
}

onMounted(()=>{
    window.addEventListener("keyup", keyUpActions)
})

onUnmounted(()=>{
    window.removeEventListener("keyup", keyUpActions)
})

const {strategy} = storeToRefs(useStrategyStore())

const onSubmit = () =>
{
    console.log(strategy)
}
</script>
<template>
    <el-page-header @back="() => router.back()" title="返回&nbsp;ESC" />
    <el-form :inline="true"  label-suffix=":" label-position="left" :model="strategy">
        <el-row :gutter="10">
            <el-col :sm="24" :lg="6">
                <el-card>
                    <el-radio-group  v-model="strategy.setting.qtyType" style="margin-right: 20px;">
                        <el-radio :label="0">按数量买</el-radio>
                        <el-radio :label="1">按资金买</el-radio>
                    </el-radio-group>
                    <el-form-item>
            <el-input v-if="strategy.setting.qtyType == 0" v-model="strategy.setting.ordQty">
                            <template #append>股</template>
                        </el-input>
                        <el-input v-else-if="strategy.setting.qtyType == 1" v-model="strategy.setting.money">
              <template #append>元</template>
                        </el-input>

                    </el-form-item>
                </el-card>
            </el-col>
            <el-col :sm="24" :lg="5">
                <el-card>
                    <el-form-item  required :show-message="false">
                        <el-radio-group >
                            <el-radio :label="0">抢板</el-radio>
                            <el-radio :label="1" disabled>低吸</el-radio>
                            <el-radio :label="2">半路</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-card>
            </el-col>
            <el-col :sm="24" :lg="5">
                <el-card>
                    <el-form-item style="margin-right: 20px;" label="回封再买"  required :show-message="false">
                        <el-switch  :active-value="0" :inactive-value="1" inline-prompt active-text="是"
                                   inactive-text="否" />
                    </el-form-item>
                    <el-form-item label="撤单再买"  required :show-message="false">
                        <el-switch  :active-value="0" :inactive-value="1" inline-prompt active-text="是"
                                   inactive-text="否" />
                    </el-form-item>
                </el-card>
            </el-col>
            <el-col :sm="24" :lg="8">
                <el-card>
                    <el-col :span="12">
                        <el-form-item label="开盘涨幅"  required :show-message="false">
                            <el-input>
                                <template #append>万分之</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="封单金额"  required :show-message="false">
                            <el-input><template #append>万元</template></el-input>
                        </el-form-item>
                    </el-col>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :sm="24" :lg="14">
                <el-card header="抢板">
                    <el-col :span="8">
                        <el-form-item   required :show-message="false">
                            <template #label>
                                <el-tooltip
                                    effect="light"
                                    content="实际价格需 * 10000"
                                    placement="top-start"
                                ><el-text tag="ins">信号价格</el-text></el-tooltip>
                            </template>
                            <el-input ><template #append>/10000(元)</template></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item  :prop="['setting', 'ordPx']" required :show-message="false">
                            <template #label>
                                <el-tooltip
                                    effect="light"
                                    content="实际价格需 * 10000"
                                    placement="top-start"
                                ><el-text tag="ins">委托价格</el-text></el-tooltip>
                            </template>
                            <el-input><template #append>/10000(元)</template></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="卖一未成交数量" label-width="143px" required :show-message="false">
                            <el-input ><template #append>股</template></el-input>
                        </el-form-item>
                    </el-col>
                </el-card>
            </el-col>
            <el-col :sm="24" :lg="10">

            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :sm="24" :lg="24">
                <el-card class="white-bg-header">
                    <template #header>
                        <el-form-item size="small"  required :show-message="false">
                                <el-tooltip
                                    effect="light"
                                    content="在允许自动撤单情况，默认允许下单后上海30ms深圳2.3ms封单金额不足或最新价变动自动撤单"
                                    placement="top-start"
                                >
                                    <el-switch
                                               :active-value="1"
                                               :inactive-value="0"
                                               inline-prompt
                                               style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                                               active-text="自动撤单"
                                               inactive-text="不自动撤单"
                                    />
                                </el-tooltip>
                        </el-form-item>
                    </template>
                    <el-col :span="5">
                        <el-form-item

                        >
                            <template #label>
                                <el-tooltip
                                    effect="light"
                                    content="达到设置的撤单金额撤单，值为-1不控制"
                                    placement="top-start"
                                ><el-text tag="ins">撤单金额</el-text></el-tooltip>
                            </template>

                            <el-input><template #append>万元</template></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item                    >
                            <template #label>
                                <el-tooltip
                                    effect="light"
                                    content="在允许自动撤单情况下，封涨停后后1分钟成交金额达到设置值自动撤单，值为0不控制"
                                    placement="top-start"
                                ><el-text tag="ins">1min撤单额</el-text></el-tooltip>
                            </template>
                            <el-input ><template #append>万元</template></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item

                        >
                            <template #label>
                                <el-tooltip
                                    effect="light"
                                    content="在允许自动撤单情况下，封涨停后后连续2分钟成交金额达到设置值自动撤单，值为0不控制"
                                    placement="top-start"
                                ><el-text tag="ins">2min撤单额</el-text></el-tooltip>
                            </template>
                            <el-input ><template #append>万元</template></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item

                        >
                            <template #label>
                                <el-tooltip
                                    effect="light"
                                    content="在允许自动撤单情况下，达到设置的撤单率自动撤单，值为0不控制"
                                    placement="top-start"
                                ><el-text tag="ins">撤单率</el-text></el-tooltip>
                            </template>
                            <el-input  >
                                      <template #append>万分之</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item

                        >
                            <template #label>
                                <el-tooltip
                                    effect="light"
                                    content="在允许自动撤单情况下，每次撤单后在封单金额上增加对应比例"
                                    placement="top-start"
                                ><el-text tag="ins">递增比</el-text></el-tooltip>
                            </template>
                            <el-input >
                                      <template #append>万分之</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :sm="24" :lg="10">
                <el-card header="时间">
                    <el-col :span="12">
                        <el-form-item label="开始时间"  required :show-message="false">
                            <el-time-picker format="HH:mm:ss" value-format="HHmmssSSS" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="结束时间"  required :show-message="false">
                            <el-time-picker  format="HH:mm:ss" value-format="HHmmssSSS" />
                        </el-form-item>
                    </el-col>
                </el-card>
            </el-col>
            <el-col :sm="24" :lg="14">

            </el-col>
        </el-row>
    </el-form>
    <el-row justify="center">
        <el-button type="primary" @click="onSubmit" >提交&nbsp;F8</el-button>
    </el-row>
</template>

<style scoped lang="scss">

.el-form-item {
    margin: 0;
}

.el-card {
    position: relative;

    .el-col {
        display: inline-flex;
    }

    :deep(.el-card__header) {
        position: absolute;
        font-size: small;
        top: 0;
        left: 4px;
        background: var(--el-color-primary);
        padding: 0 8px;
        border-radius: var(--el-border-radius-base);
        color: var(--el-color-white);
    }
     &.white-bg-header {
        :deep(.el-card__header) {
            background: white;
            border-bottom: none;
        }
     }


    :deep(.el-card__body) {
        display: flex;
        justify-content: center;
    }
    :deep(.el-input-number .el-input__inner) {
        text-align: left;
    }
}

.el-radio-group {
    flex-wrap: nowrap;
}
.el-row {
    margin-top: 20px;

    &:first-child {
        margin-top: 0;
    }
}


.el-tabs+.el-row {
    margin-top: 0;
}


:deep(.el-input-group__append) {
    background-color: var(--el-input-bg-color);
    color: var(--el-input-text-color);
    padding: 0 10px;
}

.el-input.is-disabled {

    :deep(.el-input__inner) {
        -webkit-text-fill-color: var(--el-input-text-color);
    }
}


@media screen and (min-width: 768px) and (max-width:1199px) {
    .el-form>.el-row>.el-col {
        margin-top: 20px;
    }

    .el-row .el-col:nth-child(1) {
        margin-top: 0;
    }

    .form-title .el-col {
        margin-top: 0 !important;
    }
}

:deep(.el-date-editor) {
    width: auto;
}
</style>
